<template>
  <div style="margin-top:15px;width=100%;">
    <h2 style="margin:0px;">日报补写</h2>
    <diaryDateScreenBar></diaryDateScreenBar>
    <el-card style="margin-top:15px;">
      <div slot="header">
        <span style="line-height:36px;">未填日期</span>
      </div>
      <el-row style="text-align: center">
        <div v-for="date in emptyDateList">
          <el-col :span="6">
            <el-button
              type="text"
              @click="editDiary(date)">
              {{date}}
            </el-button>
          </el-col>
        </div>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import DiaryDateScreenBar from '@/components/DiaryDateScreenBar'
import { mapState } from 'vuex'

export default {
  name: 'diary-view',
  components: {
    DiaryDateScreenBar
  },
  data () {
    return {
    }
  },
  computed: mapState({
    emptyDateList: state => state.emptyDateList
  }),
  created () {
    const date = new Date()
    let end = date.toLocaleDateString()
    let start = date.getFullYear() + '-' + date.getMonth() + 1 + '-01'
    this.$store.dispatch('getEmptyDateList', [start, end])
  },
  methods: {
    editDiary (date) {
      this.$store.commit('setDiaryFormData', {type: 'refill', date: date})
      this.$router.push({name: 'DiaryEditView'})
    }
  }
}
</script>
<style>
</style>
